import React, { use } from 'react'
import { NavBar, Space, Toast } from 'antd-mobile'
import { Button, SearchBar } from 'antd-mobile'
import { useLoaderData, useNavigate, useSearchParams } from 'react-router-dom'
import { LocationFill } from 'antd-mobile-icons'
import { getListApi, getwzApi } from '../../api/qqApi'
import { IndexBar, List } from 'antd-mobile'
import { useSelector, useDispatch } from "react-redux";
import { setcity } from '../../store/tick/cartick'
function Index() {
    const nav = useNavigate()
    const { wz } = useLoaderData()
    const { hot, list } = useLoaderData()
    const dispatch = useDispatch();
    const params=useSearchParams()
    const sever=(porpName,city)=>{
        dispatch(setcity({porpName,city}))
        console.log(porpName,city);
        nav(-1)
    }

    return (
        <div>
            <NavBar onBack={() => nav(-1)}>
                <SearchBar placeholder='请输入内容' />
            </NavBar>

            <div>
                当前城市：<LocationFill /> <span onClick={()=>sever({porpName:params.type,city:city})}>{wz}</span>
            </div>

            <div>

                <p>热门城市</p>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)' }}>
                    {
                        hot.map((item) => {
                            return <span style={{
                                width: '50px', height: '40px', background: '#ccc'
                                , textAlign: 'center', margin: '5px', alignContent: 'center', padding: '5px'
                            }}>{item.name}</span>
                        })
                    }
                </div>

            </div>

            <div style={{width:"100%",height:'400px'}}>
                <p>城市</p>
                <IndexBar style={{ height: window.innerHeight='410px' }}>
                    {list.map(group => {
                        const { title, items } = group
                        return (
                            <IndexBar.Panel 
                                index={title}
                                title={title}
                                key={title}
                            >
                                <List>
                                    {items.map((item, index) => (
                                        <List.Item key={index}>{item.name}</List.Item>
                                    ))}
                                </List>
                            </IndexBar.Panel>
                        )
                    })}
                </IndexBar>
            </div>
        </div>
    )
}

export default Index
export const loader = async () => {
    const { data: res } = await getwzApi()
    console.log(res);
    const { data: res1 } = await getListApi()
    console.log(res1);

    return { wz: res.province, hot: res1.hotCities, list: res1.cityList }

}